<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      drag
      :auto-upload="false"
      :on-change="handelchange"
    >
      <!-- 插槽父组件中传入，传过来的内容最好有div容器包裹 -->
      <slot></slot>
    </el-upload>
  </div>
</template>

<script>
var Buckets = "lumayun-1306027993";
var Regions = "ap-shanghai";
var protocol = location.protocol === "https:" ? "https:" : "http:";
var prefix = protocol + "//" + Buckets + ".cos." + Regions + ".myqcloud.com";
var camSafeUrlEncode = function(str) {
  return encodeURIComponent(str)
    .replace(/!/g, "%21")
    .replace(/'/g, "%27")
    .replace(/\(/g, "%28")
    .replace(/\)/g, "%29")
    .replace(/\*/g, "%2A");
};
export default {
  props: {
    type: [String, Number],
    module: String,
    progress: Function,
    beforeupload: Function, //开始上传前调用
    change: Function, //文件开始上传调用
    success: Function //文件上传成功调用
    // rzstatus: [String, Number], //该参数用来验证是否实名制
  },
  data() {
    return {
      imageUrl: "",
      info: {
        myparams: {},
        XCosSecurityToken: ""
      }
    };
  },
  methods: {
    handelchange(file) {
      if (this.beforeupload(file)) {
        this.uploadFile(file, function(err, data) {
          console.log(err || data);
        });
      }
    },
    getAuthorization(options, callback) {
      var params = new FormData();
      params.append("type", this.type);
      params.append("module", this.module);
      this.$post("https://api.lumayun.com/api/Qcloudclient/tempKeys",params).then(
        res => {
          if (res) {
            console.log(res);
            var credentials;
            try {
              credentials = res.credentials;
            } catch (e) {
              console.log(e);
            }
            if (credentials) {
              callback(null, {
                XCosSecurityToken: credentials.sessionToken,
                Authorization: CosAuth({
                  SecretId: credentials.tmpSecretId,
                  SecretKey: credentials.tmpSecretKey,
                  Method: options.Method,
                  Pathname: options.Pathname
                })
              });
            } else {
              callback("获取签名出错");
            }
          }
        }
      );
    },
    uploadFile(file, callback) {
      
      if(this.type !=='1'){
        this.change(file);
      }
      var Key = "ipa/" + file.name; // 这里指定上传目录和文件名
      let that = this;
      that.getAuthorization(
        {
          Method: "PUT",
          Pathname: "/" + Key
        },
        function(err, info) {
          if (err) {
            alert(err);
            return;
          }
          var auth = info.Authorization;
          var XCosSecurityToken = info.XCosSecurityToken;
          var url = prefix + "/" + camSafeUrlEncode(Key).replace(/%2F/g, "/");
          var params = new FormData();
          params.append("file", file.raw);
          const config = {
            onUploadProgress: that.progress
          };
          that
            .$put(url, params, { auth, XCosSecurityToken }, config)
            .then(() => {
              that.success(file);
            });
        }
      );
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
div >>> .el-upload-dragger {
  width: auto;
  height: auto;
}
div>>>.el-upload-list__item {
    display: none;
}
</style>
